<template>
  <div class="container">
    <Headbar />
    <HeadMenu />
    <div class="yh-layout-box wrap-comments-container">
      <div class="wrap-comments-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>买家中心</el-breadcrumb-item>
          <el-breadcrumb-item>订单中心</el-breadcrumb-item>
          <el-breadcrumb-item>评价列表</el-breadcrumb-item>
          <el-breadcrumb-item>评价</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="wraps-comments-inner">
        <div class="wrap-header">
          <div class="wrap-title fl">评价</div>
          <div class="wrap-title fr comments-tips" @click="handleAttention()">评价需知
            <img src="../../../assets/images/member/comment_ico03.png">
          </div>
        </div>
        <div class="wrap-comments-con">
          <div class="wrap-comments-detail">
            <div class="wrap-detail-left fl">
              <img class="detail-img" :src="URL.PIC + productPic">
              <p class="pd-title">{{ productName }}</p>
            </div>
            <div class="wrap-detail-right fl">
              <div class="wrap-commentsDetail">
                <div class="wrap-comments-item">
                  <div class="wrap-left-label fl">商品评分</div>
                  <div class="wrap-right-con fl">
                    <el-rate v-model="productScore"></el-rate>
                  </div>
                </div>
                <div class="wrap-comments-item">
                  <div class="wrap-left-label fl">商品评论</div>
                  <div class="wrap-right-con fl">
                    <textarea class="textArea" v-model="content" placeholder="请输入不多于100字的评价..." maxlength="100"></textarea>
                  </div>
                </div>
                <div class="wrap-comments-item">
                  <div class="wrap-left-label fl">商品图片</div>
                  <div class="wrap-right-con fl">
                    <!-- <div class="wrap-camera">
                      <img src="../../../assets/images/member/comment_ico04.png" class="defaultImg">
                    </div>  -->                   
                    <el-upload
                      :action="URL.baseURL+'/file/img/upload'"
                      :headers="{
                        'Authorization': getAuthToken()
                      }"
                      :data="{
                        prefix: imgInfo.uploadImgUrl
                      }"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleSuccess"
                      :on-error="handleError"
                      :limit="5"
                      name="image"
                      list-type="picture-card">
                      <img src="../../../assets/images/member/comment_ico04.png" class="defaultImg">
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible" width="600px">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <p class="uploadImg-tips">可上传最多不超过5张图片</p>

                    
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="wrap-comments-detail wrap-detail-finish">
            <div class="wrap-detail-left fl">
              <img class="detail-img" src="../../../assets/images/member/comment_ico01.png">
              <p class="pd-title">施耐德 插拔式中间继电器 2副触点,5A,威武简约风格指示 灯,24VDC；RXM2LB2BD</p>
            </div>
            <div class="wrap-detail-right fl">
              <div class="comments-result">
                <div class="comments-msg">
                  <span class="comments-date">2019-03-25 10:12:01</span>
                  <el-rate
                    v-model="value"
                    disabled
                    text-color="#ff9900"
                    score-template="{value}">
                  </el-rate>
                </div>
                <div class="comments-text">
                  很不错，下次继续合作~
                </div>
                <div class="comments-pic">
                  <span class="comments-img" v-for="(item,i) in 4">
                  </span>
                </div>
              </div>
            </div>
          </div> -->
          <div class="wrap-comments-scores">
            <div class="wrap-scores-list fl">
              <span class="scores-header">货物是否与描述一致</span>
              <el-rate v-model="describeScore"></el-rate>
            </div>
            <div class="wrap-scores-list fl">
              <span class="scores-header">卖家服务态度评分</span>
              <el-rate v-model="serviceScore"></el-rate>
            </div>
            <div class="wrap-scores-list fl">
              <span class="scores-header">物流服务评分</span>
              <el-rate v-model="logisticsScore"></el-rate>
            </div>
          </div>
          <div class="wrap-submit">
            <div class="submitBtn cursor" @click="handleSave()">提交</div>
          </div>
        </div>
      </div>
      
    </div>
    <Footbars/>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Footbars from '@/components/Layouts/Footbars'
import { addOrderValuation } from '@/api/order'
export default {
  name: 'Comments',
  components: {
    Headbar,
    HeadMenu,
    Footbars,
  },
  data() {
    return {
      orderId: this.getUrlParams('orderId'), //订单id
      productName: this.getUrlParams('productName'), //商品名称
      productId:  this.getUrlParams('productId'), //商品id
      productPic:  this.getUrlParams('productPic') ? decodeURIComponent(this.getUrlParams('productPic')) : "", //商品图片
      specifications:  this.getUrlParams('specifications'), //商品规格
      productSpecificationId:  this.getUrlParams('productSpecificationId'),//商品规格id
      content: '',//评论内容
      describeScore: 0,//货物是否与描述一致
      logisticsScore: 0,//物流服务评分
      productScore: 5,//商品分数
      serviceScore: 0,//卖家服务态度评分
      media: [],  //媒体实体   type媒体类型（图片：image、视频：video），url图片、视频地址
      mediaUrl: [],
      max: 100, //评价内容
      prefix: 'order/evaluation',  //图片上传文件夹标识
      imgInfo: {
        uploadImgUrl: 'order/evaluation'
      },
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  created() {

  },
  methods: {
    handleAttention() {
      const h = this.$createElement;
      this.$msgbox({
        title: '评价须知',
        customClass: 'sales-msgbox',
        message: h('p', null, [
          h('p', { style: 'color: #999' }, '1. 您的评价将影响到卖家的好评率。请您根据实际交易情况，给予真实客观的评价。'),
          h('p', { style: 'color: #999' }, '2. 确认收货后的15天内，您可以对此次交易进行评价，超过15天未评价将默认好评。'),
          h('p', { style: 'color: #999' }, '3. 评价后的30天内，您有一次机会删除给卖家的评价，且可追加评价对该次交易重新进行评价。超出30天后，不可再追加评价。'),
          h('p', { style: 'color: #999' }, '4. 每次交易仅可追加一次评价。')
        ]),
        showCancelButton: false,
        showConfirmButton: false
      }).then(() => {
       
      }).catch(() => {
                
      });
    },
    //添加评论
    handleSave() {
      this.addOrderValuation()
    },
    addOrderValuation() {

      if(this.productScore == 0){
        this.toast('请选择商品评分')
        return
      }

      if(this.describeScore == 0){
        this.describeScore = 5;
      }
      if(this.serviceScore == 0){
        this.serviceScore = 5;
      }

      if(this.logisticsScore == 0){
        this.logisticsScore = 5;
      }

      const params = {
        content: this.content,  //商品内容
        describeScore: this.describeScore == 0 ? 5 : this.describeScore, //货物是否与描述一致
        logisticsScore:  this.logisticsScore == 0 ? 5 : this.logisticsScore, //物流服务评分
        productScore:  this.productScore,  //商品分数
        serviceScore:  this.serviceScore == 0 ? 5 : this.serviceScore,  //卖家服务态度评分
        media: this.media,   //媒体实体 type媒体类型（图片：image、视频：video），url图片、视频地址
        orderId: this.orderId,   //订单id
        productId: this.productId, //商品id
        productSku: this.specifications, //商品规格
        skuId: this.productSpecificationId //商品规格id
      }
     
      addOrderValuation(params).then(res => {
        if(res.code == 200){
          this.$message({
            message: res.msg,
            type: 'success'
          });
         setTimeout(() => { 
          this.$router.back(-1)
         }, 1000) 
        }else{
          this.$message({
            message: res.msg,
            type: 'success'
          });
        }
      })
    },
    //查看上传图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传之前
    beforeUpload(file, fileList) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传的图片大小不能超过 1MB!');
        return false;
      }
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      this.getUploadImgs(fileList)
    },
    // 上传失败
    handleError(file) {
      this.actionsAfter('上传失败，请稍后再试！', 'error')
    },
    //删除上传图片
    handleRemove(file, fileList) {
      this.getUploadImgs(fileList)
    },
    getUploadImgs(fileList) {
      this.media = []
      for (var i in fileList) {
        if(fileList[i].response){
          this.media.push({
            type: 'image',
            url: fileList[i].response.data
          })
        }else{
          this.media.push({
            type: 'image',
            url: fileList[i].url
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/comments.scss';
</style>
<style lang="scss">
  .wrap-comments-container{
    .el-upload-list--picture-card .el-upload-list__item{
      width: 62px;
      height: 62px;
      line-height: 62px;
    }
    .el-upload--picture-card{
      width: 60px;
      height: 60px;
      line-height: 60px;
      border: 1px solid #eee;
      border-radius: 5px;
      background: #f7f7f7;
      text-align: center;
      img{
        margin-top: 16px;
      }
    }
    .el-upload-list--picture-card .el-upload-list__item-actions span+span{
      margin-left: 5px;
    }
    .el-upload-list--picture-card .el-upload-list__item-status-label i{
      position: absolute;
      left: 14px;
    }
  }
</style>
